<template>
  <div class="box">
    <div class="header">
      <div class="header-left">
        <van-icon name="arrow-left" size="25" @click="onClickLeft" />
      </div>
      <div class="header-search">
        <van-search
          v-model="searchText"
          placeholder="请输入搜索关键词"
          shape="round"
          input-align="center"
          autofocus
          @search="onSearch"
        />
      </div>
      <div class="header-right">
        <van-button
          type="primary"
          size="small"
          color="#e93b3d"
          @click="onSearch"
          >搜索</van-button
        >
      </div>
    </div>
    <van-divider :style="{ margin: 0 }" />
    <div class="main">
      <div class="searchTip">
        <div class="search-history">
          <div class="search-top" v-if="historyShow">
            <p>最近搜索</p>
            <p>
              <van-icon name="delete-o" size="20px" @click="clearHistory" />
            </p>
          </div>
          <div class="historyContent">
            <van-tag
              size="medium"
              type="primary"
              color="#f0f2f5"
              text-color="black"
              v-for="(item, index) in tipLists"
              :key="index"
              @click="gethistoryJump(item)"
            >
              {{ item }}
            </van-tag>
          </div>
        </div>
        <div class="search-hot">
          <div class="search-history">
            <div class="search-top">
              <p>热门搜索</p>
              <p @click="yinCang">
                <span class="yinc">隐藏</span>
              </p>
            </div>
            <div class="historyContent" v-if="yincang">
              <van-tag
                size="medium"
                type="primary"
                color="#f0f2f5"
                text-color="black"
                v-for="(item, index) in hotwordsList"
                :key="index"
                @click="gethotJump(item.keyword)"
              >
                {{ item.keyword }}
              </van-tag>
            </div>
            <div class="ycText" v-else>已隐藏搜索发现</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Vue from "vue";
import { getHotword } from "../../api/search";
import { Icon, Search, Button, Tag, Dialog, Toast } from "vant";

Vue.use(Icon);
Vue.use(Search);
Vue.use(Button);
Vue.use(Tag);
Vue.use(Dialog);
Vue.use(Toast);

export default {
  name: "Kind",
  created() {
    // 进入页面就需要给历史记录显示
    this.tipLists = this.getLocalStorage("tipLists");
    // 热门搜索
    getHotword().then((res) => {
      console.log(res);
      if (res.data.code == "200") {
        this.hotwordsList = res.data.data;
        this.hotwordsList = this.hotwordsList.filter((item) => {
          return item.keyword != "" && item.keyword != undefined;
        });
      }
    });
  },
  components: {},
  data() {
    return {
      searchText: "",
      tipLists: [],
      hotwordsList: [],
      yincang: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch() {
      this.tipLists = this.getLocalStorage("tipLists");
      this.tipLists.push(this.searchText);
      // this.searchText = "";
      this.setLocalStorage("tipLists", this.tipLists);
      this.tipLists = this.getLocalStorage("tipLists");

      this.$router.push({
        path: "/kind/search/ksearchlsit",
        query: { keyword: this.searchText },
      });
    },
    gethistoryJump(item) {
      this.$router.push({
        path: "/kind/search/ksearchlsit",
        query: { keyword: item },
      });
    },
    gethotJump(item) {
      this.$router.push({
        path: "/kind/search/ksearchlsit",
        query: { keyword: item },
      });
    },
    clearHistory() {
      Dialog.confirm({
        message: "确定删除吗？",
      })
        .then(() => {
          localStorage.removeItem("tipLists");
          this.historyShow = false;
        })
        .catch(() => {
          Toast("已取消");
        });
    },
    yinCang() {
      this.yincang = !this.yincang;
    },
    getLocalStorage(key) {
      let data = localStorage.getItem(key);
      if (data) {
        return JSON.parse(data);
      } else {
        return [];
      }
    },
    setLocalStorage(key, value) {
      return localStorage.setItem(key, JSON.stringify(value));
    },
  },
  computed: {
    historyShow: {
      set(val) {
        console.log(val);
        if (!val) {
          this.tipLists = this.getLocalStorage("tipLists");
        }
      },
      get() {
        if (this.tipLists.length > 0) {
          return true;
        } else {
          return false;
        }
      },
    },
  },
};
</script>

<style scoped>
.box {
  background-color: #fff;
}
/* 头部样式 */
.header {
  background-color: #fff;
  align-items: center;
  overflow: hidden;
}
.van-search {
  width: 2.8rem;
}
/* 下面是主题样式 */
.searchTip {
  margin: 0.13rem;
}
/* 历史记录 */
.search-top {
  display: flex;
  justify-content: space-between;
}
.search-top:first-child {
  font-size: 0.16rem;
}
.historyContent {
  margin-top: 0.15rem;
}
.van-tag {
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
}
.yinc {
  color: #999;
  font-size: 0.14rem;
}
.ycText {
  margin-top: 0.1rem;
  text-align: center;
  color: #999;
}
</style>
    

